<template>
    <div class="bobxxxssw">
        <!-- 融资余额 -->
        <div id="mainsd"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    data() {
        return {
            chengZhengData: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            qiYiData1: [222, 234, 400, 505, 1222, 222, 234, 400, 505, 1222, 432, 234], // 第一组数据
            qiYiData2: [], // 第二组数据（动态生成）
            todayLoanAmount: null, // 今日放款金额
            todayRepaymentAmount: null, // 今日回款金额
            todayLoanOrders: null, // 今日放款单量
            overdueValues: [], // 逾期值
        };
    },
    created() {
        // 动态生成具有波动的回收数据
        this.generateFluctuatingData();

        // 动态生成今日放款、回款、单量数据
        this.generateTodayStats();

        // 动态生成逾期值
        this.generateOverdueValues();
    },
    mounted() {
        this.initCharts();
    },
    methods: {
        generateFluctuatingData() {
            // 根据第一组数据生成第二组数据，并添加随机波动
            this.qiYiData2 = this.qiYiData1.map(value => {
                const fluctuation = Math.random() * 1000 - 250; // 随机波动范围：-250 到 +250
                return Math.max(0, value + fluctuation); // 确保值不小于 0
            });
        },
        calculateAverage(data) {
            // 计算数据的平均值
            const sum = data.reduce((acc, val) => acc + val, 0);
            return sum / data.length;
        },
        generateTodayStats() {
            // 今日放款金额（50-400万之间）
            this.todayLoanAmount = Math.floor(Math.random() * (400 - 50 + 1)) + 50;

            // 今日回款金额（20-200万之间）
            this.todayRepaymentAmount = Math.floor(Math.random() * (200 - 20 + 1)) + 20;

            // 今日放款单量（50-200单之间）
            this.todayLoanOrders = Math.floor(Math.random() * (200 - 50 + 1)) + 50;
        },
        generateOverdueValues() {
    // 生成逾期值，基于逾期率（0.4%-0.5%），并确保逾期值在 4万到 5万之间
            this.overdueValues = this.qiYiData1.map(value => {
                // 计算基于逾期率的逾期值
                const overdueRate = 0.004 + Math.random() * (0.005 - 0.004); // 0.4%-0.5%
                let overdueValue = value * overdueRate; // 初始逾期值计算
                
                // 确保逾期值在 4万到 5万之间
                overdueValue = Math.max(4, Math.min(5, overdueValue));
                
                return Math.floor(overdueValue); // 返回整数形式的逾期值
            });
        },
        initCharts() {
            // 获取当前月份
            const currentDate = new Date();
            const currentMonthIndex = currentDate.getMonth(); // 0 表示一月，11 表示十二月

            // 过滤数据，只保留当前月份之前的数据
            const filteredChengZhengData = this.chengZhengData.slice(0, currentMonthIndex + 1);
            const filteredQiYiData1 = this.qiYiData1.slice(0, currentMonthIndex + 1);
            const filteredQiYiData2 = this.qiYiData2.slice(0, currentMonthIndex + 1);
            const filteredOverdueValues = this.overdueValues.slice(0, currentMonthIndex + 1);

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("mainsd"));
            // 实现响应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });

            // 计算两条数据的平均值
            const avg1 = this.calculateAverage(filteredQiYiData1);
            const avg2 = this.calculateAverage(filteredQiYiData2);

            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line'
                    }
                },
                legend: {
                    data: ['融资', '回收', '逾期值'], // 添加图例名称
                    top: '0%', // 图例位置
                    right: '0%', // 图例靠右对齐，距离右侧 10%
                    textStyle: {
                        color: '#fff' // 图例文字颜色
                    }
                },
                grid: {
                    left: '0%',
                    top: '15%', // 调整顶部留白以适应图例
                    right: '0%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    inverse: false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    axisLabel: {
                        interval: 0, // 横轴信息全部显示
                        rotate: 30, // -15度角倾斜显示
                    },
                    data: [...filteredChengZhengData]
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}万' // 在 Y 轴刻度值后添加单位“笔”
                    }
                },
                series: [
                    {
                        name: '融资',
                        type: 'line', // 折线图类型
                        smooth: true, // 平滑曲线
                        symbol: 'none', // 不显示数据点符号
                        label: {
                            normal: {
                                show: false // 隐藏标签
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#73c0de' // 线条颜色
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(115, 192, 222, 0.6)' // 渐变起始颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(115, 192, 222, 0)' // 渐变结束颜色
                                }])
                            }
                        },
                        data: [...filteredQiYiData1]
                    },
                    {
                        name: '回收',
                        type: 'line', // 折线图类型
                        smooth: true, // 平滑曲线
                        symbol: 'none', // 不显示数据点符号
                        label: {
                            normal: {
                                show: false // 隐藏标签
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#1ace4a' // 线条颜色
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(26, 206, 74, 0.6)' // 渐变起始颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(26, 206, 74, 0)' // 渐变结束颜色
                                }])
                            }
                        },
                        data: [...filteredQiYiData2] // 使用动态生成的数据
                    },
                    {
                        name: '逾期值',
                        type: 'line', // 折线图类型
                        symbol: 'none', // 不显示数据点符号
                        itemStyle: {
                            normal: {
                                color: 'red' // 红色线条
                            }
                        },
                        lineStyle: {
                            width: 2, // 设置线条宽度
                            type: 'solid' // 实线
                        },
                        data: [...filteredOverdueValues] // 使用动态生成的逾期值
                    }
                ]
            };

            myChart.setOption(option);
        },
    },
};
</script>

<style>
#mainsd {
    height: 300px;
    /* width: 580px; */
    box-sizing: border-box;
    padding: 5px;
}

.bobxxxssw {
    position: relative;
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
}

.balance {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.today-stats p {
    margin: 5px 0;
}
</style>